.fc {
	--fc-event-bg-color: var(--primary);
	--fc-event-border-color: var(--primary);
	--fc-today-bg-color: var(--primary-10);
	--fc-button-bg-color: transparent;
	--fc-button-active-bg-color: transparent;
	--fc-button-hover-bg-color: transparent;
	--fc-button-border-color: transparent;
	--fc-button-active-border-color: transparent;
	--fc-button-hover-border-color: transparent;
	--fc-button-text-color: var(--foreground-subdued);
	--fc-border-color: var(--border-normal);

	.fc-more-popover {
		max-width: var(--form-column-width);
		max-height: 330px;

		.fc-popover-body {
			max-height: 270px;
			overflow: auto;
		}
	}

	.fc-list-empty {
		background-color: var(--background-subdued) !important;
	}

	.fc-daygrid-more-link {
		color: var(--primary);
		font-weight: 600;
	}

	.fc-daygrid-day-bottom {
		line-height: 1.5;
	}

	.fc-daygrid-dot-event {
		padding: 0px 4px;
		line-height: 1.5;

		.fc-event-title {
			text-overflow: ellipsis;
		}
	}

	.fc-daygrid-dot-event:hover,
	.fc-daygrid-dot-event.fc-event-mirror {
		background: var(--primary-25);
	}

	.fc-daygrid-event-dot {
		display: none;
	}

	.fc-button {
		font-weight: inherit !important;
		font-size: inherit !important;
		text-transform: capitalize !important;

		&-primary {
			&.fc-prevYear-button,
			&.fc-prev-button,
			&.fc-next-button,
			&.fc-nextYear-button {
				padding-right: 4px;
				padding-left: 4px;
			}

			&:focus {
				box-shadow: none !important;
			}

			&:not(:disabled) {
				&:hover {
					--fc-button-text-color: var(--foreground-normal);
				}

				&:active:focus,
				&.fc-button-active:focus {
					box-shadow: none !important;
				}
			}
		}

		&-active {
			--fc-button-text-color: var(--primary);

			&:hover {
				--fc-button-text-color: var(--primary) !important;
			}
		}
	}

	.fc-toolbar {
		&.fc-header-toolbar {
			position: sticky;
			top: var(--layout-offset-top);
			z-index: 4;
			width: 100%;
			height: 52px;
			margin-bottom: 36px;
			padding: 0 8px;
			font-weight: inherit !important;
			font-size: inherit !important;
			background-color: var(--background-page);
			border-top: 2px solid var(--border-subdued);
			border-bottom: 2px solid var(--border-subdued);
			box-shadow: 0 0 0 2px var(--background-page);
		}
	}

	.fc-toolbar-title {
		font-size: inherit !important;

		@include type-label;
	}

	.fc-event.selected {
		color: var(--primary);
	}
}
